<template>
  <div class="admin-home">
    <h1>管理员控制台</h1>
    <div class="stats">
      <div class="stat-card">
        <h3>教职工总数</h3>
        <p>{{ teacherCount }}</p>
      </div>
      <div class="stat-card">
        <h3>商家总数</h3>
        <p>{{ merchantCount }}</p>
      </div>
      <div class="stat-card">
        <h3>今日就餐记录</h3>
        <p>{{ diningCountToday }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import request from '../utils/request';
// 导入需要的类型
import type { ApiResponse, AdminStats } from '../types/index';

const teacherCount = ref(0);
const merchantCount = ref(0);
const diningCountToday = ref(0);

onMounted(() => {
  getStats();
});

// 明确指定响应类型为 ApiResponse<AdminStats>
const getStats = async () => {
  try {
    const res: ApiResponse<AdminStats> = await request.get('/api/admin/stats');
    // 从 res.data 中获取数据（后端通常会把业务数据放在 data 字段）
    teacherCount.value = res.data.teacherCount;
    merchantCount.value = res.data.merchantCount;
    diningCountToday.value = res.data.diningCountToday;
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};
</script>